<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		/* align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 */
		.contain {
			width: 100%;
			height: 400px;
			background-color: cornsilk;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			/* align-items: baseline; */
			/* flex-start：与交叉轴的起点对齐。
				flex-end：与交叉轴的终点对齐。
				center：与交叉轴的中点对齐。
				space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
				space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
				stretch（默认值）：轴线占满整个交叉轴。 */
		}

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>

<body>
	<div class="contain">
		<div style="background-color: #6495ED; width: 60px; height: 60px;" class="item">1</div>
		<div style="background-color: #ffaa7f; width: 60px; height: 60px;" class="item">2</div>
		<div style="background-color: #55aa00; width: 60px; height: 60px;" class="item">3</div>
		<div style="background-color: #aaaa00; width: 60px; height: 60px;" class="item">4</div>
		<div style="background-color: #ff00ff; width: 60px; height: 60px;" class="item">5</div>
		<div style="background-color: #0055ff; width: 60px; height: 60px;" class="item">6</div>
		<div style="background-color: #000000; width: 60px; height: 60px;" class="item">7</div>
		<div style="background-color: #ffff00; width: 60px; height: 60px;" class="item">8</div>
		<div style="background-color: #55ffff; width: 60px; height: 60px;" class="item">9</div>
		<div style="background-color: #ff5500; width: 60px; height: 60px;" class="item">10</div>
		<div style="background-color: #55557f; width: 60px; height: 60px;" class="item">11</div>
		<div style="background-color: #aaffff; width: 60px; height: 60px;" class="item"> 12</div>
		<!-- <div>
		<div style="background-color: #6495ED; width: 60px; height: 60px;">13</div>
		<div style="background-color: #ffaa7f; width: 60px; height: 60px;">14</div>
		<div style="background-color: #55aa00; width: 60px; height: 60px;">15</div>
		<div style="background-color: #aaaa00; width: 60px; height: 60px;">16</div>
		<div style="background-color: #ff00ff; width: 60px; height: 60px;">17</div>
		<div style="background-color: #0055ff; width: 60px; height: 60px;">18</div>
		<div style="background-color: #000000; width: 60px; height: 60px;">19</div>
		<div style="background-color: #ffff00; width: 60px; height: 60px;">20</div>
		<div style="background-color: #55ffff; width: 60px; height: 60px;">21</div>
		<div style="background-color: #ff5500; width: 60px; height: 60px;">22</div>
		<div style="background-color: #55557f; width: 60px; height: 60px;">23</div>
		<div style="background-color: #aaffff; width: 60px; height: 60px;">24</div>
		</div> -->
	</div>
</body>

</html>